<template>
    <view class="container">
        <!-- 用药提醒列表区域 -->
        <view class="reminder-list">
            <!-- 如果reminderList为空，显示暂无数据 -->
            <view v-if="this.timeStore.alarmGroupList.length === 0" class="no-data">暂无数据</view>
            <view class="reminder-item" v-for="(reminder, index) in this.timeStore.alarmGroupList" :key="index">
                <view class="reminder-info">
                    <text class="reminder-time">{{truncateAlarmTime(reminder.alarmTime)}}</text>
                    <text class="reminder-group">{{reminder.categoryName}}</text>
                </view>
                <view class="reminder-detail">
                  <button class="detail-btn" size="mini" plain @click="goGroupDetail(reminder.categoryId,reminder.categoryName)" >详情</button>
                    <button class="delete-btn" size="mini" plain @click="deleteGroupAlarm(reminder.alarmId,reminder.categoryId)" >删除</button>
                </view>
            </view>
        </view>
        <!-- 添加闹钟按钮 -->
        <button class="add-alarm-btn" @click="goToAddGroup">添加用药提醒</button>
    </view>
</template>

<script>
import { useTimeStore } from '../../store/time';
const timeStore = useTimeStore()

export default {
    setup(){
        return{
            timeStore
        }
    },
    data() {
        return {
        };
    },
    async onLoad(){
        await this.timeStore.getAllGroupAlarm()
    },
    methods: {
        truncateAlarmTime(time) {
            // 这里假设截取前3个字符，你可以根据实际需求修改截取的位置
            return time ? time.substring(10, 16) : '';
        },
        // 跳转到 addGroup.vue 页面的方法
        goToAddGroup() {
            uni.navigateTo({
                url:'/pages/reminder/addGroup'
            })
        },
        deleteGroupAlarm(alarmId,categoryId){
          this.timeStore.deleteGroupAlarm(alarmId,categoryId)
        },
        goGroupDetail(id,name){
          uni.navigateTo({
            url:`/subpkgDetail/drugGroupDetail/drugGroupDetail?id=${id}&name=${name}`
          })
        }
    }
};
</script>

<style lang="scss">
.container {
    padding: 20rpx;
    background-color: #f5f5f5;
    min-height: 100vh;
    position: relative; // 相对定位，方便子元素定位
}

// 用药提醒列表区域样式
.reminder-list {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    width: 100%; // 设置列表宽度为 100%
    box-sizing: border-box; // 确保宽度包含内边距和边框
    max-height: calc(100vh - 200rpx); // 设置最大高度，减去底部按钮和一些间距
    overflow-y: auto; // 当内容超出最大高度时，显示垂直滚动条

    .reminder-item {
        display: flex;
        align-items: center;
        padding: 20rpx;
        border-bottom: 1rpx solid #f5f5f5;

        &:last-child {
            border-bottom: none;
        }

        .reminder-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .reminder-time {
                font-size: 28rpx;
                color: #333;
                margin-bottom: 16rpx;
            }

            .reminder-group {
                font-size: 24rpx;
                color: #666;
            }
        }

        .reminder-detail {
            .detail-btn {
                font-size: 24rpx;
                color: #2ac2d1;
                border-color: #2ac2d1;
                margin-right: 20rpx;
                &::after {
                    border-color: #2ac2d1;
                }
            }
            .delete-btn {
                font-size: 24rpx;
                color: #2ac2d1;
                border-color: #2ac2d1;
            
                &::after {
                    border-color: #2ac2d1;
                }
            }
        }
    }

    // 暂无数据的样式
    .no-data {
        text-align: center;
        font-size: 24rpx;
        color: #999;
    }
}

// 添加闹钟按钮样式
.add-alarm-btn {
    position: fixed; // 固定定位
    bottom: 100rpx; // 距离底部 20rpx
    left: 50%; // 水平居中
    transform: translateX(-50%); // 水平居中偏移
    font-size: 28rpx;
    color: #fff;
    background-color: #2ac2d1;
    padding: 10rpx 20rpx;
    border-radius: 16rpx;
    width: calc(100% - 40rpx); // 减去容器的左右内边距
    box-sizing: border-box; // 确保宽度包含内边距和边框
}
</style>